<!DOCTYPE html>
<html lang="zxx">

<head>
    <!-- METATAG -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <meta name="keywords" content="resume, cv, portfolio, personal,personal resume, modern" />
    <meta name="author" content="Rama Hardian" />
    <!-- TITLE PAGE -->
    <title>Miun - Personal Page</title>
    <!-- BOOTSTRAP CSS -->
    <link href="/static/css/bootstrap.min.css" rel="stylesheet">
    <!-- FONTAWESOME CSS -->
    <link href="/static/css/fontawesome/all.min.css" rel="stylesheet">
    <!-- GOOGLE FONT -->
    <link href="https://fonts.googleapis.com/css2?family=Karla:wght@400;700;900&display=swap" rel="stylesheet">
    <!-- AOS CSS -->
    <link href="/static/css/aos.css" rel="stylesheet">
    <!-- OWL CAROUSEL CSS -->
    <link href="/static/css/owl.carousel.min.css" rel="stylesheet">
    <link href="/static/css/owl.theme.default.min.css" rel="stylesheet">
    <!-- MAGNIFIC CSS -->
    <link href="/static/css/magnific.css" rel="stylesheet">
    <!-- THEMES CSS -->
    <link href="/static/css/themes-2.css" rel="stylesheet">
</head>

<body>
    <!-- PRELOADER -->
    <div class="wrap-load">
        <div class="img-logo-load">
            <div class="progress">
                <div class="line"></div>
            </div>
            <img src="/static/image/asset/logo.png" alt="logo" />
        </div>
    </div>
    <!-- END PRELOADER -->
    <!-- MAIN HEADER PAGE -->
    <header id="header" class="pt-3 pb-3 main-kalpaxheader">
        <div class="container">
            <div class="row">
                <div class="col-lg-2">
                    <a class="logowrap" href="#">
                        <img src="/static/image/asset/logo.png" alt="logo" />
                    </a>
                    <!-- BURGER MENU WRAP -->
                    <div class="kalpax-burger-menu">
                        <span></span>
                    </div>
                    <!-- END BURGER MENU WRAP -->
                </div>
            </div>
            <!-- NAVIGATION PAGE -->
            <div class="menuContent justify-content-center">
                <ul>
                    <li class="submenulink">
                        <a class="vlink" href="#">Home
                            <i class="fa fa-chevron-down"></i>
                        </a>
                        <ul class="submenu">
                            <li><a href="index.html">Home</a></li>
                            <li><a href="#">Home Two</a></li>
                        </ul>
                    </li>
                    <li><a class="vlink" href="about.html">About me</a></li>
                    <li class="submenulink"><a class="vlink" href="#">Project
                        <i class="fa fa-chevron-down"></i>

                    </a>
                        <ul class="submenu">
                            <li><a href="project.html">Project Modern</a></li>
                            <li><a href="project-grid.html">Project grid </a></li>
                            <li><a href="project-masonry.html">Project masonry </a></li>
                            <li><a href="project-single.html">Project single </a></li>
                        </ul>
                    </li>
                    <li class="submenulink">
                        <a class="vlink" href="#">Other Page
                            <i class="fa fa-chevron-down"></i>
                        </a>
                        <ul class="submenu">
                            <li><a href="team.html">Team</a></li>
                            <li><a href="404.html">404 Page</a></li>
                            <li><a href="pricing.html">Pricing</a></li>
                        </ul>
                    </li>
                    <li><a class="vlink" href="contact.html">Contact</a></li>

                </ul>
            </div>
            <!-- END NAVIGATION PAGE -->
        </div>
    </header>
    <!-- END MAIN HEADER PAGE -->
    <!-- MAIN WRAP-->
    <main id="mainwrap">
        <!-- hero section -->
        <section id="herosection" style="background: url('/static/image/asset/line.png')  no-repeat center;  background-position: center;
        background-size: inherit;">
            <div class="container position-relative">

                <div class="row ">
                    <div class="col-lg-6 align-items-center justify-content-left d-flex pt-5 pt-lg-0 mt-5">
                        <div class="detail-hero">
                            <p>MIUN KALPAX</p>
                            <h1 class="mb-4">
                                Full-Stack Developer.
                            </h1>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto repellat veniam commodi aut iusto explicabo unde culpa autem! Sapiente eius repudiandae error ea corrupti voluptatem dolorum perferendis voluptas, mollitia
                                animi.
                            </p>
                            <a href="#" class="btn-dark mt-3 l-hover">
                                Start project
                            </a>
                        </div>
                    </div>
                    <div class="col-lg-6 align-items-center d-lg-flex ">
                        <div class="hero-poto ">
                            <img src="/static/image/user/3.png " alt="pto " />
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- end hero section -->
        <!-- overlap -->
        <section id="overlapsection">
            <div class="container overlapwrap">
                <div class="row">
                    <div class="col-lg-4 pe-0 ps-0 ps-lg-3">
                        <div class="info-overlap darkbg">
                            <i class="fa-solid fa-fingerprint"></i>
                            <h3 class="pt-5">Brand Strategy</h3>
                            <p class="pt-4">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Doloribus error sint eius!</p>
                            <a href="#" class="btn-semidark l-hover mt-3">
                               Read more
                           </a>
                        </div>
                    </div>
                    <div class="col-lg-4 pe-0 ps-0">
                        <div class="info-overlap lightbg">
                            <i class="fa-solid fa-laptop-code"></i>
                            <h3 class="pt-5">Web Design</h3>
                            <p class="pt-4">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Doloribus error sint eius!</p>
                            <a href="#" class="btn-light d-hover mt-3">
                                Read more
                            </a>
                        </div>
                    </div>
                    <div class="col-lg-4 ps-0">
                        <div class="info-overlap lightbg">
                            <i class="fa-solid fa-bullhorn"></i>
                            <h3 class="pt-5">market Strategy</h3>
                            <p class="pt-4">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Doloribus error sint eius!</p>
                            <a href="#" class="btn-light d-hover mt-3">
                                Read more
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- our work -->
        <section id="ourproject" class="pt-5 pb-5 mt-5 mb-5">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6 mb-5">
                        <div class="titlehead">
                            <h3>
                                Featured works.
                            </h3>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="titlehead">
                            <p class="text-muted">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Tenetur iste ea accusantium nesciunt minus eligendi doloremque, at, temporibus eveniet similique ex.
                        </div>
                    </div>
                    <div class="col-lg-12 wrapitempoto mt-5">
                        <div class="row">
                            <div class="col-lg-6 order-2 order-lg-1">
                                <div class="detail-porto">
                                    <p class="mb-5 text-muted">Web, Dev
                                    </p>
                                    <h3>Fashion Blog Website
                                    </h3>
                                    <p class="mt-3 mb-4 h4 text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis blanditiis</p>
                                    <a href="#" class="btn-semidark l-hover mt-3">
                                        Check project
                                    </a>
                                </div>
                            </div>
                            <div class="col-lg-6 ps-0 pe-0 order-1 order-lg-2 position-relative">
                                <div class="wrapitemproject" style="background: url('"/static/image/porto/6.jpg')  no-repeat center;  background-position: center;
                                background-size: inherit;">

                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-12 wrapitempoto mt-5">
                        <div class="row">
                            <div class="col-lg-6 order-2 order-lg-1">
                                <div class="detail-porto">
                                    <p class="mb-5 text-muted">Architect, Building
                                    </p>
                                    <h3>Home Crock
                                    </h3>
                                    <p class="mt-3 mb-4 h4 text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis blanditiis</p>
                                    <a href="#" class="btn-semidark l-hover mt-3">
                                        Check project
                                    </a>
                                </div>
                            </div>
                            <div class="col-lg-6 ps-0 order-1 order-lg-2 pe-0 position-relative">
                                <div class="wrapitemproject" style="background: url('"/static/image/porto/6.jpg')  no-repeat center;  background-position: center;
                                background-size: inherit;">

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-12 text-center mt-5 pt-5">
                    <a href="#" class="btn-semidark l-hover">
                        More project
                    </a>
                </div>
            </div>
        </section>
        <!-- testimonial -->
        <section id="testimonialsection" class="pb-5 pt-5">
            <div class="container">
                <div class="row justify-content-center pb-5 pt-5">
                    <div class="col-lg-9">
                        <div class="titlehead text-center">
                            <h3>
                                Our clients said.
                            </h3>
                            <p class="mt-3 mb-4 h4 text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis blanditiis</p>
                        </div>
                    </div>
                </div>
                <div class="row pb-5 pt-5">
                    <div class="col-lg-12 text-center">
                        <div class="clientslide owl-carousel" id="clienttestimonial">
                            <div class="review-item text-lg-start">
                                <div class="userpoto">
                                    <img src="/static/image/user/p1.png" alt="poto" />
                                </div>

                                <p class="pt-5 text-muted">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore voluptas corporis a amet voluptatum suscipit. Voluptates, totam.</p>
                                <p class="mb-0 text-muted mt-5">Ceo pt ini dan itu</p>
                                <p>Mba tina</p>
                            </div>
                            <div class="review-item text-lg-start">
                                <div class="userpoto">
                                    <img src="/static/image/user/p2.png" alt="poto" />
                                </div>

                                <p class="pt-5 text-muted">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore voluptas corporis a amet voluptatum suscipit. Voluptates, totam.</p>
                                <p class="mb-0 text-muted mt-5">Ceo pt ini dan itu</p>
                                <p>Mba tina</p>
                            </div>
                        </div>
                        <div class="testi-nav mt-5 pt-5">

                        </div>
                    </div>
                </div>
                <div class="row mt-5 clientlist pt-5 pb-5">
                    <div class="imgclient col-lg-2">
                        <a href="#">
                            <img src="/static/image/client/1.png" alt="client" />
                        </a>
                    </div>
                    <div class="imgclient col-lg-2">
                        <a href="#">
                            <img src="/static/image/client/2.png" alt="client" />
                        </a>
                    </div>
                    <div class="imgclient col-lg-2">
                        <a href="#">
                            <img src="/static/image/client/3.png" alt="client" />
                        </a>
                    </div>
                    <div class="imgclient col-lg-2">
                        <a href="#">
                            <img src="/static/image/client/1.png" alt="client" />
                        </a>
                    </div>
                    <div class="imgclient col-lg-2">
                        <a href="#">
                            <img src="/static/image/client/5.png" alt="client" />
                        </a>
                    </div>
                    <div class="imgclient col-lg-2">
                        <a href="#">
                            <img src="/static/image/client/6.png" alt="client" />
                        </a>
                    </div>
                    <div class="imgclient col-lg-2">
                        <a href="#">
                            <img src="/static/image/client/3.png" alt="client" />
                        </a>
                    </div>
                    <div class="imgclient col-lg-2">
                        <a href="#">
                            <img src="/static/image/client/5.png" alt="client" />
                        </a>
                    </div>
                    <div class="imgclient col-lg-2">
                        <a href="#">
                            <img src="/static/image/client/4.png" alt="client" />
                        </a>
                    </div>
                </div>
            </div>
        </section>
    </main>
    <!-- END MAIN WRAP-->
    <!-- FOOTER CONTENT PAGE SECTION -->
    <footer id="footer-wrap" class="pt-5 pb-5">
        <div class="container">
            <div class="row justify-content-center footupper pb-5">
                <div class="col-lg-9">
                    <div class="footquote text-center pt-5 pb-5">
                        <h3>Have a project in mind? Let’s get to work.</h3>
                        <a href="#" class="btn-semidark l-hover mt-5">
                            Read more
                        </a>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-6">
                    <ul class="sosmedlist pt-5 text-center text-lg-start">
                        <li>
                            <a href="#">
                                <i class="fa-brands fa-facebook-f"></i>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="fa-brands fa-twitter"></i>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="fa-brands fa-instagram"></i>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="fa-brands fa-github"></i>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="col-lg-6">
                    <ul class="sosmedlist pt-5 text-center text-lg-end pt-3 mt-3">
                        <li>
                            <a href="#">
                             Home
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                Project
                            </a>
                        </li>
                        <li>
                            <a href="#">
                               About
                            </a>
                        </li>
                        <li>
                            <a href="#">
                               Free quote
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </footer>
    <!-- END FOOTER CONTENT PAGE SECTION -->
    <!-- GO TO TOP INDICATOR -->
    <a href="# " class="goup"><i class="fa fa-chevron-up " aria-hidden="true "></i></a>
    <!-- JQUERY -->
    <script src="/static/javascript/jquery.js "></script>
    <!-- JQUERY EASING -->
    <script src="/static/javascript/easing.js "></script>
    <!-- BOOTSTRAP JS -->
    <script src="/static/javascript/bootsrtap.min.js "></script>
    <!-- PARALLAX JS -->
    <script src="/static/javascript/parallax.js "></script>
    <!-- PARTICLE JS -->
    <script src="/static/javascript/particle.js "></script>
    <!-- CIRCLEFULL JS -->
    <script src="/static/javascript/circlefull.js "></script>
    <!-- AOS JS -->
    <script src="/static/javascript/aos.js "></script>
    <!-- ISOTOPE JS -->
    <script src="/static/javascript/isotope.js"></script>

    <!-- jqueryvalidation JS -->
    <script src="/static/javascript/jqueryvalidation.js "></script>
    <!-- OWL CAROUSEL JS -->
    <script src="/static/javascript/owl.carousel.min.js "></script>
    <!-- magnific JS -->
    <script src="/static/javascript/magnific.js "></script>
    <!-- MAIN JS -->
    <script src="/static/javascript/main.js "></script>
    <!-- parallax init JS -->
    <script src="/static/javascript/parallax-init.js "></script>
    <!-- particles init JS -->
    <script src="/static/javascript/particles-init.js "></script>
</body>

</html>